<template>
	<taMediaSelect ref="meidaSelect"></taMediaSelect>
	<div class="_td-table-opt">

		<el-table :data="value" border :size="size || 'small'" style="width: 100%">

			<el-table-column label="封面" width="80">
				<template #default="scope">
					<el-image style="max-width: 80px; max-height: 80px;" preview-teleported hide-on-click-modal
						:src="scope.row.cover_image" :preview-src-list="[scope.row.cover_image]" show-progress
						fit="contain" :z-index="19900501" />
				</template>
			</el-table-column>

			<el-table-column label="标题">
				<template #default="scope">
					<el-input :size="size || 'small'" :modelValue="scope.row.title || ''"
						@Update:modelValue="(n)=>(scope.row.title = n)" @blur="onInput(scope.row)"></el-input>
				</template>
			</el-table-column>

			<template v-if="false" v-for="(col,idx) in column" :key="col.label + idx">
				<el-table-column :label="col.label">
					<template #default="scope">
						<template v-if="col.value">

						</template>
						<template v-else>
							<template v-if="col.key == 'label'">
								<el-input :size="size || 'small'" :modelValue="scope.row[col.key] || ''"
									@Update:modelValue="(n)=>(scope.row[col.key] = n)"
									@blur="onInput(scope.row)"></el-input>
							</template>
							<template v-else>

								<el-input :size="size || 'small'" :modelValue="scope.row['value'].title || ''"
									@Update:modelValue="(n)=>(scope.row['value'].title = n)"
									@blur="onInput(scope.row)"></el-input>

							</template>
						</template>
					</template>
				</el-table-column>
			</template>
			<el-table-column width="45" align="center" fixed="right">
				<template #default="scope">
					<i class="fc-icon icon-delete" @click="del(scope.$index)"></i>
				</template>
			</el-table-column>
		</el-table>
		<div class="_td-table-opt-handle">
			<el-button link type="primary" @click="add" v-if="!max || max > value.length">
				<i class="fc-icon icon-add"></i> {{ t('tableOptions.add') }}
			</el-button>
		</div>

	</div>
</template>

<script>
	import {
		defineComponent
	} from 'vue';
	import {
		copy
	} from '@form-create/utils/lib/extend';

	export default defineComponent({
		name: 'MediaSelect',
		emits: ['update:modelValue', 'change'],
		components: {

		},
		props: {
			modelValue: [Array, Object],
			column: {
				type: Array,
				default: () => [{
					label: 'label',
					key: 'label'
				}, {
					label: 'value',
					key: 'value'
				}]
			},
			valueType: Array,
			max: Number,
			size: String,
		},
		inject: ['designer'],
		watch: {
			modelValue() {
				this.value = this.tidyModelValue();
			}
		},
		computed: {
			t() {
				return this.designer.setupState.t;
			},
		},
		data() {
			return {
				value: this.tidyModelValue(),
			};
		},
		methods: {
			tidyModelValue() {
				const modelValue = this.modelValue;
				if (this.valueType === 'string') {
					return (modelValue || []).map(value => {
						return {
							value: '' + value
						}
					})
				} else if (this.valueType === 'object') {
					return Object.keys((modelValue || {})).map(label => {
						console.error(label)
						return {
							label,
							value: modelValue[label]
						}
					})
				} else {
					return [...modelValue || []].map(v => {
						return copy(v);
					});
				}
			},
			tidyValue() {
				if (this.valueType === 'object') {
					const obj = {};
					this.value.forEach(v => {
						if (v.label && v.value) {
							obj[v.label] = v.value;
						}
					})
					return obj;
				} else {
					return this.value.map(v => {
						if (this.valueType === 'string') {
							return v.value;
						}
						return {
							...v
						}
					});
				}
			},
			onInput(item) {
				if (this.column.length === 1 && '' === item[this.column[0].key]) {
					return;
				}
				const flag = this.column.every(v => {
					if (v.required === false) {
						return true;
					}
					if (['object', 'string'].indexOf(this.valueType) > -1) {
						return item[v.key] !== undefined && item[v.key] !== '' && item[v.key] !== null;
					}
					return item[v.key] !== undefined;
				})
				if (flag) {
					this.input();
				}
			},
			input() {
				const value = this.tidyValue();
				this.$emit('update:modelValue', value);
				this.$emit('change', value);
			},
			add() {
				this.$refs.meidaSelect.open({
					type: 'video',
				}, (items) => {
					items.forEach(item => {
						this.value.push({
							id: item.id,
							title: item.title.split('.').slice(0, -1).join('.') || item
								.title,
							cover_image: item.cover_image ? item.cover_image :
								`${item.src}?x-oss-process=video/snapshot,t_0,f_jpg`
						});
					})
					this.input();
				})
				return
				this.value.push(this.column.reduce((initial, v) => {

					initial[v.key] = '';
					/*
					if (v.key == 'label') {

					} else {
						initial = {
							title: '多颗牙缺失怎么选择',
							cover_image: "https://blkq-static.oss-cn-shenzhen.aliyuncs.com/static/video/%E6%B4%BB%E5%8A%A8%E8%A7%86%E9%A2%91/%E7%A7%8D%E6%A4%8D%E7%A7%91%E6%99%AE/1.png"
						};
					}
					*/
					return initial;
				}, {}));
			},
			del(idx) {
				this.value.splice(idx, 1);
				this.input();
			}
		}
	});
</script>

<style scoped>
	._td-table-opt {
		width: 100%;
	}

	._td-table-opt .el-table {
		z-index: 1;
	}

	._td-table-opt-handle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 5px;
	}
</style>
